<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../assets/js/vue.js"></script>
    <title>v-model</title>
</head>
<body>
    <h3>v-model 双向数据绑定</h3>
    <hr>
    <h2>v-model修饰符</h2>
        <li>  .lazy：取代 imput 监听 change 事件。只有当我们的光标失去焦点以后才发生改变</li>
        <li>.number：输入字符串转为数字。当我们失去焦点的时候会将不是数字的字符串删掉</li>
        <li>.trim：输入去掉首尾空格。</li>
    </ol>
    <div id="app">
        <div v-text="message"></div>
        <input typt="text" v-model="message">
        <br>
        <span>.lazy</span> <input type="text" v-model.lazy="message">
        <hr>
        <span>.number</span> <input type="text" v-model.number="message">
        <hr>
        <span>.trim</span> <input type="trim" v-model.trim="message">
        <h3>文本域的绑定</h3>
        <textarea  rows="30" cols="20" v-model="message"></textarea>
        <hr>
        <h3>多选</h3>
        <input type="checkbox" id="check" v-model="isCheck">
        <label for="check" v-text="isCheck"></label>
        <h3>多选绑定一个数组</h3>

        <input type="checkbox" id="zhansan" value="zhansan" v-model="names">
        <label for="zhansan" >zhansan</label>
        <input type="checkbox" value="lisi" id="checks1" v-model="names">
        <label for="checks1" >李四</label>
        <input type="checkbox" id="checks2" value="wangwu" v-model="names">
        <label for="checks2" >王五</label>
        <h3>选择的用户：{{names}}</h3>
    </div> 
</body>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"hello world",
                isCheck:true,
                names:[],

            }
        });
    </script>
</html>